<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新能源车联网综合大数据平台</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
	<link rel="stylesheet" href="css/ui-choose.css">
</head>
<body>
<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl"></div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info" >
                    <div class="info-title">实时统计</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/info-img-1.png" alt="" >
                            </div>
                            <div class="info-text fl">
                                <p>设备名称</p>
                                <p>发动机01</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>设备台数</p>
                                <p>3</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃数(辆)</p>
                                <p>12,457</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃率(%)</p>
                                <p>83</p>
                            </div>
                        </div>
                    </div>
                </div>
				<script src="js/jquery.js"></script>
				<script src="js/ui-choose.js"></script>
                <div class="top-bottom">
                    <div class="title">传感器选择</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="shebeiSelect" class="charts"  >
						<div style="margin-left: 40px;margin-top: 20px;">
							<!-- <font  color="white" >传感器名称</font>
							<select style="width: 60%;height: 20px">
							<option>传感器1</option>
							<option>传感器2</option>
							<option>传感器3</option>
							</select></br>
							</br>
							
							<font  color="white" >传感器名称</font>
							<select style="width: 60%;height: 20px">
							<option>传感器1</option>
							<option>传感器2</option>
							<option>传感器3</option>
							</select></br>
							</br>
			
							<font  color="white" >传感器名称</font>
							<select style="width: 60%;height: 20px">
							<option>传感器1</option>
							<option>传感器2</option>
							<option>传感器3</option>
							</select> -->
							
							<table class="demo-table">
							<tr>
							  <td>
								  <ul class="ui-choose" multiple="multiple" id="uc_03">
									  <li>传感器01</li>
									  <li>传感器02</li>
									  <li>传感器03</li>
									  <li>传感器04</li>
									  <li>传感器05</li>
									  
									  <li>传感器06</li>
									  <li>传感器07</li>
									  <li>传感器08</li>
									  <li>传感器09</li>
									  <li>传感器10</li>
									  
									  <li>传感器11</li>
									  <li>传感器12</li>
									  <li>传感器13</li>
									  <li>传感器14</li>
									  <li>传感器15</li>
									  
									  <li>传感器11</li>
									  <li>传感器12</li>
									  <li>传感器13</li>
									  <li>传感器14</li>
									  <li>传感器15</li>
									  
									  <li>传感器11</li>
									  <li>传感器12</li>
									  <li>传感器13</li>
									  <li>传感器14</li>
									  <li>传感器15</li>
									  
									  <li>传感器11</li>
									  <li>传感器12</li>
									  <li>传感器13</li>
									  <li>传感器14</li>
									  <li>传感器15</li>
									  
									  <li>传感器11</li>
								   </ul>
								</td>
							</tr>
							</table>
							
						</div>	
					</div>
					<script>
					// 将所有.ui-choose实例化
					$('.ui-choose').ui_choose();
					// uc_03 ul 多选
					var uc_03 = $('#uc_03').data('ui-choose');
					uc_03.click = function(index, item) {
						console.log('click', index);
					};
					uc_03.change = function(index, item) {
						console.log('change', index);
					};

					</script>
				</div>
            </div>
        </div>
        <div class="con-center fl">
            <div class="cen-top" id="map"></div>
            <div class="cen-bottom">
                <div class="title">车辆充电高峰时间</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="charts" onclick="fit3()" ></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title" >本月行驶里程TOP5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_1" class="charts" onclick="fit1()" ></div>
            </div>
            <div class="right-center">
                <div class="title" >报警车辆TOP5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"   onclick="fit5()" ></div>
            </div>
            <div class="right-bottom">
                <div class="title">电池报警车辆TOP10</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts" onclick="fit6()"></div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
<script type="text/javascript">
	function fit1() {
		echarts_1('map');
		}
	
	function fit3() {
		echarts_3('map');
		}
	
	
	function fit5() {
		//$("#map").html($(".right-top").html());
		//$(".map-num").html(); 
		echarts_5('map');					
		}
	
	function fit6() {
		echarts_6('map');				
		}
	
	
	
</script>
</html>